@mixin flex($flex-flow: null, $justify-content: null, $align-items: null, $gap: null) {
  display: flex;
  flex-flow: $flex-flow;
  justify-content: $justify-content;
  align-items: $align-items;
  gap: $gap;
  @content;
}
@mixin wh($width: null, $height: null, $line-height: null) {
  width: $width;
  height: $height;
  line-height: $line-height;
  box-sizing: border-box;
}
@mixin fs($size: null, $color: null, $font-weight: null, $font-style: null) {
  font-size: $size;
  color: $color;
  font-weight: $font-weight;
  font-style: $font-style;
  @content;
}
@mixin attr($background: null, $border: null, $radius: null) {
  background: $background;
  border: $border;
  border-radius: $radius;
  @content;
}
@mixin box($wh: null, $attr: null) {
  @if $wh != null {
    @include wh($wh...);
  }
  @if $attr != null {
    @include attr($attr...);
  }
}
@mixin linear-gradient($deg, $colors...) {
  background-image: linear-gradient($deg, $colors...);
}
@mixin ripple($color: #555) {
  position: relative;
  transition: opacity 0.2s;
  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: #333;
    border: inherit;
    border-color: #333;
    border-radius: inherit;
    transform: translate(-50%, -50%);
    opacity: 0;
    content: ' ';
  }
  &:active::before {
    opacity: 0.1;
  }
}
@mixin pos(
  $position: null,
  $top: null,
  $left: null,
  $right: null,
  $bottom: null,
  $transform: null
) {
  position: $position;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
  transform: $transform;
}
@mixin grid($columns: null, $rows: null, $gap: null, $align-content: null, $justify-content: null) {
  display: grid;
  grid-template-columns: $columns;
  grid-template-rows: $rows;
  gap: $gap;
  align-content: $align-content;
  justify-content: $justify-content;
  @content;
}
@mixin style($box: null, $flex: null, $grid: null, $pos: null, $fs: null) {
  @if $box != null {
    @include box($box...);
  }
  @if $flex != null {
    @include flex($flex...);
  }
  @if $grid != null {
    @include grid($grid...);
  }
  @if $pos != null {
    @include pos($position...);
  }
  @if $fs != null {
    @include fs($fs...);
  }
  @content;
}
